<div class="umb-overlay-body" ng-controller="Umbraco.Overlays.EditorPickerOverlay as vm">
    <!-- FILTER -->
    <div class="umb-control-group -no-border">
        <div class="form-search">
            <i class="icon-search"></i>
            <input type="text"
                   style="width: 100%"
                   ng-change="vm.filterItems()"
                   ng-model="vm.searchTerm"
                   class="umb-search-field search-query search-input input-block-level"
                   localize="placeholder"
                   placeholder="@placeholders_filter"
                   umb-auto-focus
                   no-dirty-check />
        </div>
    </div>
    <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
    <!-- TABS -->
    <div ng-if="vm.showTabs">
        <umb-tabs-nav model="vm.tabs"></umb-tabs-nav>
        <umb-tabs-content>
            <umb-tab id="tab{{tab.id}}" ng-repeat="tab in vm.tabs" rel="{{tab.id}}">
                <div ng-if="tab.alias==='Default'">
                    <div ng-repeat="(key,value) in tab.typesAndEditors">
                        <h5>{{key}}</h5>
                        <ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
                            <li ng-repeat="systemDataType in value | orderBy:'name'"
								data-element="editor-{{systemDataType.name}}"
                                ng-mouseover="vm.showDetailsOverlay(systemDataType)"
                                ng-click="vm.pickEditor(systemDataType)"
                                class="-four-in-row">
                                <a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
                                    <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
                                    {{ systemDataType.name }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div ng-if="tab.alias==='Reuse'">
                    <div ng-repeat="(key,value) in tab.userConfigured">
                        <h5>{{key}}</h5>
                        <ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
                            <li ng-repeat="dataType in value | orderBy:'name'"
								data-element="editor-{{dataType.name}}"
                                ng-mouseover="vm.showDetailsOverlay(dataType)"
                                ng-click="vm.pickDataType(dataType)"
                                class="-four-in-row">
                                <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
                                    <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
                                    {{ dataType.name }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </umb-tab>
        </umb-tabs-content>
    </div>
    <!-- FILTER RESULTS -->
    <div ng-if="vm.showFilterResult">
        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
        <div ng-repeat="(key,value) in vm.userConfigured">
            <div ng-if="(value | filter:vm.searchTerm).length > 0">
                <h5>{{key}}</h5>
                <ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
                    <li ng-repeat="dataType in value | orderBy:'name' | filter: vm.searchTerm"
                        ng-mouseover="vm.showDetailsOverlay(dataType)"
                        ng-click="vm.pickDataType(dataType)"
                        class="-four-in-row">
                        <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
                            <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
                            {{ dataType.name }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
        <div ng-repeat="(key,value) in vm.typesAndEditors">
            <div ng-if="(value | filter:vm.searchTerm).length > 0">
                <h5>{{key}}</h5>
                <ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
                    <li ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm"
                        ng-mouseover="vm.showDetailsOverlay(systemDataType)"
                        ng-click="vm.pickEditor(systemDataType)"
                        class="-four-in-row">
                        <a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
                            <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
                            {{ systemDataType.name }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <umb-overlay ng-if="vm.editorSettingsOverlay.show"
		data-element="overlay-editor-settings"
                 model="vm.editorSettingsOverlay"
                 position="right"
                 view="vm.editorSettingsOverlay.view">
    </umb-overlay>
</div>
